<script lang='ts'>
import { defineComponent, ref } from 'vue'
import { require } from '../function/require'
export default defineComponent({
    setup() {
        const TabBarIndex = ref(0);
        return { TabBarIndex };
    }
})
</script>

<template>
    <van-tabbar v-model="TabBarIndex" placeholder :border=false>
        <van-tabbar-item to="/">
            <span>首页</span>
            <template #icon="props">
                <img
                    :src="props.active ? require('../assets/images/Home-Icon/ic_tab_circle_pressed.png') : require('../assets/images/Home-Icon/ic_tab__circle_normal.png')" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/renovation">
            <span>装修</span>
            <template #icon="props">
                <img
                    :src="props.active ? require('../assets/images/Home-Icon/ic_tab_fixtures_pressed.png') : require('../assets/images/Home-Icon/ic_tab_fixtures_normal.png')" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/myhome">
            <span>我家</span>
            <template #icon="props">
                <img
                    :src="props.active ? require('../assets/images/Home-Icon/ic_tab_home_pressed.png') : require('../assets/images/Home-Icon/ic_tab_home_normal.png')" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/goodthing">
            <span>好物</span>
            <template #icon="props">
                <img
                    :src="props.active ? require(' ../assets/images/Home-Icon/ic_tab_buy_pressed.png') : require('../assets/images/Home-Icon/ic_tab__buy_normal.png')" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/UserCenter">
            <span>个人中心</span>
            <template #icon="props">
                <img
                    :src="props.active ? require(' ../assets/images/Home-Icon/ic_tab_mine_pressed.png') : require('../assets/images/Home-Icon/ic_tab_mine_normal.png')" />
            </template>
        </van-tabbar-item>
    </van-tabbar>
</template>

<style lang="scss" scoped>
.van-tabbar--fixed {
    background-color: #f7f8fa;
    z-index: 5;

}

.van-tabbar {
    .van-tabbar-item {
        color: #c0c1c3;

        .van-tabbar-item__icon {
            img {
                width: 24px;
                height: auto;
            }
        }

        .van-tabbar-item__text {
            span {
                font-size: 12px;
                transform: scale(0.9);
                display: block;
            }
        }
    }

    .van-tabbar-item--active {
        color: black;
    }
}
</style>